<template>
  <div :id="mc" :style="{ height: height, width: width }"></div>
</template>

<script>
import axios from "axios";
export default {
  name: "hello",
  props: {
    height: { type: String, default: "80vh" },
    width: { type: String, default: "100%" },
    options: { type: Object, default: () => {} },
    mc: { type: String, default: "main4" },
    color: { type: Array, default: [] },
    data1: { type: Array, default: [] },
    text: { type: String, default: "" },
    data2: { type: Array, default: [] },
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
    };
  },
  watch: {
    data1() {
      this.drawLine();
    },
  },
  mounted() {
    this.drawLine(); // 初始化
  },
  methods: {
    drawLine() {
      var _this = this.color;
      // 基于准备好的dom，初始化echarts实例
      let mc1 = this.$echarts.init(document.getElementById(this.mc));
      // 绘制图表
      mc1.setOption({
        title: {
          text: "计划完成率",
          padding: [0, 0, 0, 250],
          textStyle: {
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line", // 默认为直线，可选为：'line' | 'shadow'
          },
        },

        xAxis: [
          {
            type: "category",
            data: this.data1,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "17%",
            data: [
              this.data2[0],
              {
                value: this.data2[1],
                itemStyle: {
                  color: "#49ACDC",
                },
              },
              {
                value: this.data2[2],
                itemStyle: {
                  color: "#9AD3E0",
                },
              },
            ],
            itemStyle: {
              normal: {
                color: this.color,
                barBorderRadius: [30, 30, 30, 30],
              },
            },
          },
        ],
      });
    },
  },
};
</script>

<style>
</style>
